<template>
	<view class="wrapper">
		<uni-nav-bar leftText="关闭"  rightText="红包记录" title="红包" @clickLeft='$back' @clickRight="$open('./rad_racord')" color="#FFA61E" backgroundColor="#F14C2E"></uni-nav-bar>
		<view class="red_owner">
			<view class="red_head"><image src="../../static/user/ueser-pugongying.png" mode="" class="owner_head"></image></view>
			<view class="whose_red f28">
				<view class="red_owner_box">
					<text class="red_owner_name">蒲公英</text>
					的红包
				</view>
				<view class="bless">恭喜发财，万事如意</view>
			</view>
			<view class="red_price tCenter">
				<text class="price">200.00</text>元
			</view>
			<view class="reply01 f26 tCenter" @tap="changeReply">
				回复一句话表示感谢吧！
			</view>
			<view class="reply01 f26 tCenter">
				谢谢
			</view>
		</view>
		<view class="red_geter">
			<view class="red_detail">1个红包共200.00元，1分38秒被抢光！</view>
			<view class="red_detail">领取0/1个，已过期！</view>
			<view class="red_geter_detail">
				<image src="../../static/user/user-qingxu.png" mode="" class="red_get_head"></image>
				<view class="font_box">
					<view class="set_top setFlex">
						<view class="red_get_name">一点小情绪</view>
						<view class="red_get_money">200.00元</view>
					</view>
					<view class="set_bottom setFlex">
						<view class="get_time">2020-03-25 13:06:55</view>
						<view class="reply">谢谢</view>
					</view>
				</view>
			</view>
		</view>
		<alert alertTitle="回复" alertText='' showInput="true" @alertConfirm='alertConfirm' v-if="showReply"></alert>
	</view>
</template>

<script>
import alert from "@/components/alert/alert.vue"
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
export default {
	data() {
		return {
			showReply:false
		};
	},
	components:{uniNavBar,alert},
	methods: {
		changeReply(){
			this.showReply=!this.showReply
		},
		alertConfirm(type,text){
			this.changeReply()
		}
	}
};
</script>

<style lang="scss">
	.reply01{
		color: #FFA61E;
	}
	.red_price{
		margin: 39rpx 0 45rpx;
		.price{
			font-size: 72rpx;
		}
	}
.red_owner {
	background: rgba(242, 243, 245, 1);
	padding-bottom: 29rpx;
}
.red_head {
	height: 127rpx;
	background: rgba(241, 76, 46, 1);
	border-radius: 0 0 50% 50%;
	text-align: center;
}
.owner_head {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	margin-top: 31rpx;
}
.whose_red {
	font-size: 28rpx;
	line-height: 28rpx;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	text-align: center;
	margin-top: 79rpx;
}
.bless {
	margin-top: 29rpx;
}
.red_detail {
	height: 88rpx;
	font-size: 28rpx;
	line-height: 88rpx;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
	padding-left: 33rpx;
}
.red_get_head {
	width: 94rpx;
	height: 94rpx;
	border-radius: 50%;
	margin: 28rpx 21rpx 28rpx 30rpx;
}
.red_geter_detail{
	display: flex;
	flex-direction: row;
	height: 170rpx;
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
}
.font_box{
	flex: 1;
	
}
.set_top{
	font-size:28rpx;
	line-height: 28rpx;
	font-weight:500;
	color:rgba(51,51,51,1);
	margin: 40rpx 31rpx 0 0;
}
.set_bottom{
	margin: 25rpx 30rpx 0 -20rpx;
	line-height: 18rpx;
	
}
.setFlex{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
}
.get_time{
	font-size:22rpx;
	font-weight:500;
	color:rgba(102,102,102,1);
	transform: scale(0.8);
}
.reply{
	font-size:22rpx;
	transform: scale(0.9);
	font-weight:500;
	color:rgba(51,51,51,1);
	margin-top:-7rpx;
}
</style>
